<template>
  <a-layout-header class="header">
    <div class="logo-container">
      <router-link to="/about">
        <div class="logo"/>
      </router-link>

      <router-link to="/welcome">
        <span class="logo-text">HTAO12306管理端</span>
      </router-link>

    </div>
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined/> &nbsp;欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/about">
        <router-link to="/about">
          <user-outlined/> &nbsp;关于
        </router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-header>
</template>

<script>
import {defineComponent, ref, watch} from 'vue';
import router from "@/router";

export default defineComponent({
  name: "the-header-view",
  setup() {
    const selectedKeys = ref([]);
    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch', newValue);
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, {immediate: true});
    return {
      selectedKeys,
    };
  },
});

</script>

<style scoped>
.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  float: left;
}

.logo {
  width: 50px;
  height: 50px;
  background: url('../assets/logo.jpg') no-repeat center center;
  background-size: contain;
}

.logo-text {
  margin-left: 10px;
  margin-right: 20px;
  font-size: 30px;
  color: white;
}
</style>